import React from 'react';
import ReactDom from 'react-dom';
//高阶组件稍微复杂的情况

function FormLocalstorage(OldComponent,fieldName){
  return class extends React.Component {
    state={value: ''}
    componentDidMount(){
      fetch('/dic.json').then(res=>res.json()).then(data=>{
        console.log(data,'data')
      });
      let value = localStorage.getItem(fieldName);
      this.setState({value})
    }
    handleChange=(e)=>{
      localStorage.setItem(fieldName,e.target.value);
      this.setState({value: e.target.value})
    }
    render(){
     return <OldComponent value={this.state.value} handleChange={this.handleChange}/>
    }
  }
}
class Field extends React.Component {
  render(){
    return <input defaultValue={this.props.value} onChange={this.props.handleChange}></input>
  }
}
let UserName = FormLocalstorage(Field,'username');
let Password = FormLocalstorage(Field,'password');

ReactDom.render(
  <><UserName/><Password/></>,
  document.getElementById('root')
)
